// Group of `.postShorten`
// Add margin and border bottom when `.postShorten` are in `.postShorten-group`
.postShorten-group {
    .postShorten {
        // Space between 2 shorten post
        margin-top:    15px;
        border-bottom: 1px solid #eef2f8;
    }
}

// Post
.postShorten {
    position:       relative;
    width:          100%;
    display:        inline-block;
    vertical-align: top;

    .postShorten-thumbnailimg {
        overflow:hidden;
    }
    .postShorten-header {
        .postShorten-title {
            margin:     0;
            word-break: initial;
            overflow:   hidden;

            &:hover {
                text-decoration: none;
            }
        }
    }
    // postShorten meta contains post's date, post's categories and tags
    .postShorten-meta {
        line-height: 1.5em;

        a {
            color: map-get($colors, light);
        }
    }
    .postShorten-meta,
    .postShorten-readingtime {
        color: map-get($colors, light);
    }
    .postShorten-excerpt_link {
        // Bring the post's link nearest of the excerpt
        margin-top: -15px;
    }
    .postShorten-meta,
    .postShorten-readingtime,
    .postShorten-excerpt_link {
        font-family: map-get($font-families, 'post-excerpt-link');
        font-size:   map-get($font-size, small);
        font-weight: 400;
    }
    .postShorten-excerpt,
    .postShorten-content {
        text-rendering: optimizelegibility;
        letter-spacing: -0.3px;
        font-family:    map-get($font-families, 'post-content');
        color:          map-get($colors, base);
        font-weight:    400;
        overflow:       hidden;
        @include prefix('hypens', 'auto', 'webkit' 'moz');

        img {
            display:   block;
            width:     auto;
            max-width: 100%;
        }
    }
    .postShorten-excerpt {
        margin-top: 15px;
    }
    .postShorten-content {
        margin-top: 25px;
    }
}

// Hide the post's thumbnail image on very small screen and down
@media #{$xsmall-and-down} {
    .postShorten {
        .postShorten-thumbnailimg {
            display: none;

            img {
                display: none;
            }
        }
    }
}

// Display the post's thumbnail image on small screen and up
@media #{$small-and-up} {
    .postShorten.postShorten--thumbnailimg-right {
        .postShorten-thumbnailimg {
            float:  right;
            margin: 5px 0 30px 15px;

            img {
                display:    block;
                width:      $post-thumbnail-image-width;
                height:     $post-thumbnail-image-width;
                object-fit: cover;
                overflow:   hidden;
            }
        }
        .postShorten-wrap {
            float: left;
            width: calc(100% - #{$post-thumbnail-image-width} - 20px);
        }
    }
    .postShorten.postShorten--thumbnailimg-left {
        .postShorten-thumbnailimg {
            float:  left;
            margin: 5px 15px 30px 0;

            img {
                display:    block;
                width:      $post-thumbnail-image-width;
                height:     $post-thumbnail-image-width;
                object-fit: cover;
                overflow:   hidden;
            }
        }
        .postShorten-wrap {
            float: right;
            width: calc(100% - #{$post-thumbnail-image-width} - 20px);
        }
    }
    .postShorten.postShorten--thumbnailimg-top {
        .postShorten-thumbnailimg {
            margin-top: 5px;
        }
    }
    .postShorten.postShorten--thumbnailimg-bottom {
        .postShorten-wrap {
            display: block;
            width:   100%;
        }
        .postShorten-excerpt > p:last-of-type {
            margin-bottom: 0;
        }
        .postShorten-thumbnailimg {

            display:  block;
            width:    100%;
            overflow: hidden;
            margin:   15px 0 15px 0;

            img {
                width:      100%;
                height:     auto;
                max-height: $post-bottom-thumbnail-image-max-height;
                object-fit: cover;
            }
        }
    }
}
